<template>
    <div class="outpatientConsumption">

        <el-container>

            <el-header style="text-align: left; font-size: 18px">
                <el-row :gutter="22">
                    <el-col :span="6">
                        <div class="title" style="font-weight: 540; font-size: 22px;">
                            住院消费记录
                        </div>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <div class="grid-content bg-purple">
                            <el-row style="text-align: right;">
                                <el-button type="primary" class="filter-item" @click="handleCreate" plain>新增</el-button>
                                <el-button type="primary" @click="deleteTableData" plain>删除</el-button>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-header>

            <el-main>
                <el-row :gutter="50">
                    <el-col :span="7">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" @blur="serachUserData">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="input" @blur="serachUser" ref="serachInp" placeholder="请输入病人姓名/住院号"></el-input>
                    </el-col>
                    <el-col :span="11" style="margin-left:-40px">
                        <el-button type="primary" @click="serachUser" style="background-color: rgba(0, 110, 255, 1);">
                            搜索
                        </el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <div class="box">
                        <el-table ref="multipleTable"
                            :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                            tooltip-effect="dark" style="width: 100%; " @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="80" align="center">
                            </el-table-column>
                            <el-table-column label="操作时间" width="160" class="cell" align="center">
                                <template slot-scope="scope">{{ scope.row.operateTime }}</template>
                            </el-table-column>
                            <el-table-column prop="" label="订单号" width="130" align="center">
                                <template slot-scope="scope">{{ scope.row.orderForm }}</template>
                            </el-table-column>
                            <el-table-column prop="userName" label="患者姓名" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="seeNum" label="住院号" width="130" align="center">
                            </el-table-column>
                            <el-table-column label="来源" width="100" align="center">
                                <template slot-scope="scope">{{ scope.row.source == 1 ? '微信小程序' : scope.row.source == 2 ?
                                    '支付宝' : "医院App" }}</template>
                            </el-table-column>
                            <el-table-column label="业务类型" width="120" align="center">
                                <template slot-scope="scope">{{ scope.row.busType == 1 ? '门诊缴费' : '住院缴费' }}</template>
                            </el-table-column>
                            <el-table-column label="收费项目合计" width="110" align="center">
                                <template slot-scope="scope">{{ scope.row.costType == 1 ? 4 : 6 }}</template>
                            </el-table-column>
                            <el-table-column label="支付方式" width="100" align="center">
                                <template slot-scope="scope">{{ scope.row.payment == 1 ? '余额' : scope.row.payment == 2 ?
                                    '支付宝' : '微信' }}</template>
                            </el-table-column>
                            <el-table-column prop="regCost" label="支付金额" width="100" align="center">
                            </el-table-column>
                            <el-table-column label="缴费状态" width="120" align="center">
                                <template slot-scope="scope">{{ scope.row.paymentStatus == 1 ? '已缴费' : '未缴费' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope={row}>
                                    <router-link :to='`/Costdetail?id=${row.id}`'>
                                        <i class="el-icon-s-order" style="color:rgba(0, 110, 255, 1);font-size: 20px;"></i>
                                    </router-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange" :total="tableData.length"
                            @current-change="handleCurrentChange" layout="total,  prev, pager, next, jumper"
                            :current-page="currentPage" :page-size="pageSize">
                        </el-pagination>
                    </div>
                </el-row>
                <!-- form表单 -->
                <div class="tab-container">
                    <el-dialog :visible.sync="dialogFormVisible">
                        <el-form :model="questionForm" ref="dataForm" label-position="left" label-width="90px"
                            style="width: 400px; margin-left:50px;">
                            <el-form-item label="患者姓名">
                                <el-input type="textarea" :rows="1" v-model="questionForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="来源">
                                <el-radio-group v-model="questionForm.khly" style="margin-right:6px;">
                                    <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{ radio
                                    }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="就诊卡号">
                                <el-input v-model="questionForm.card" />
                            </el-form-item>
                            <el-form-item label="支付金额">
                                <el-input v-model="questionForm.money" />
                            </el-form-item>
                            <el-form-item label="收费项目">
                                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>

                            <el-form-item label="支付方式">
                                <el-radio-group v-model="questionForm.zffs">
                                    <el-radio :label="1">余额</el-radio>
                                    <el-radio :label="2">支付宝</el-radio>
                                    <el-radio :label="3">微信</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="缴费状态" prop="otherAnswer2">
                                <el-radio-group v-model="questionForm.jfzt">
                                    <el-radio :label="1">已支付</el-radio>
                                    <el-radio :label="2">未支付</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="createData()">确定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { getList, addTableData, deletes, delUserData } from '@/api/outpation'
import { getNowDate, createordernum } from '@/utils/costManagement'
export default {
    data() {
        return {

            // 分页器
            currentPage: 1,
            pageSize: 10,
            // table
            tableDataList: [
            ],
            // 搜索
            value: '',
            value1: '',
            input: '啊啊啊啊',
            multipleSelection: [],

            // 表单
            subjectList: ["微信小程序", "支付宝", "医院APP"],
            input: "",
            cities: ['上海', '北京', '广州', '深圳'],
            checkedCities: ['上海'],
            questionForm: {
                data: "",
                card: "",
                name: "",
                khly: "",
                ywlx: "",
                xmhj: "",
                knye: "",
                zffs: "",
                money: "",
                jfzt: "",
            },
            dialogFormVisible: false,
        }
    },
    mounted() {
        this.getTableDate()
    },
    computed: {
        tableData() {
            let _role = this.tableDataList.filter(list => {
                return !list.isdelete
            })
            // console.log(_role);
            return _role
        }
    },
    methods: {
        // 获取数据
        async getTableDate() {
            const res = await getList()
            // console.log(res);
            this.tableDataList = res.data
        },
        async serachUser(e) {
            let _val = this.$refs.serachInp.value
            // 如果输入框内容不为空  就遍历数据库中的数据 并且返回 符合搜索要求数据
            if (_val != '') {
                let _arr = await getList()
                let serachArr = []

                _arr.data.forEach(item => {
                    if (item.userName.indexOf(_val) >= 0) {
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                this.currentPage = 1
                this.pageSize = 10
            } else {
                this.getTableDate()
            }
        },
        async serachUserData(e) {
            let _val = this.value1
            let start = _val[0].getTime()
            let end = _val[1].getTime()
            // console.log(start);
            // 如果输入框内容不为空  就遍历数据库中的数据 并且返回 符合搜索要求数据
            if (_val != '') {
                let _arr = await getList()
                let serachArr = []
                _arr.data.forEach(item => {
                    let data = new Date(item.operateTime)
                    let time = data.getTime()
                    // console.log(time);
                    if (end > time && time > start) {
                        // console.log(item);
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                // console.log(serachArr);
            } else {
                this.getTableDate()
            }
        },
        handleCheckedCitiesChange() {

        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        handleCreate() {
            this.questionForm = {
                "operateTime": getNowDate(),
                "orderForm": createordernum('Dh'),
                "userName": "",
                "seeNum": createordernum('El'),
                "source": "",
                "costType": "",
                "busType": "",
                // "cost": ["", ""],
                "payment": "",
                "regCost": "",
                "paymentStatus": "",
                "isChecked": false,
                "isdelete": 0
            };
            this.dialogFormVisible = true;
        },
        // 添加
        createData() {
            const params = this.questionForm;
            // alert(JSON.stringify(params));
            // this.tableDataList.push(params)
            addTableData(params)
            this.$message({
                message: '导入成功',
                type: 'success'
            })
            setTimeout(() => {
                this.getTableDate()
            }, 1)
            this.dialogFormVisible = false
        },
        deleteTableData() {
            if (this.multipleSelection.length == 0) {
                this.$alert("请先选择要删除的数据", "提示", {
                    confirmButtonText: "确定",
                });
            } else {
                this.multipleSelection.forEach(async item => {
                    // console.log(item.id);
                    // await delUserData(item.id)
                    await deletes(item.id)
                    this.getTableDate()
                })
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            }
        }
    }
}

</script>
<style>
.el-main {
    overflow: hidden;
}
</style>
<style lang="scss" scoped>
.title {
    position: relative;
    margin-left: 40px;

    &:before {
        top: 10px;
        left: -40px;
        position: absolute;
        display: block;
        width: 27px;
        height: 10px;
        border-radius: 8px 10px 10px 8px;
        background: rgba(0, 110, 255, 1);
        content: '';
    }
}

.el-main {
    background-color: #fff;
    // padding: 10px;
    min-height: 600px;
    border-radius: 8px;
    // box-sizing: border-box;
}

.box {
    padding: 10px 30px
}

.el-pagination {
    text-align: right;
    margin-top: 10px;
    margin-right: 40px;
}
</style>